<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js定时器选项卡</title>
    <style>
        p,ul,h3{ margin:0; padding:0; }
        em { font-style:normal; }
        strong{ font-weight: normal}
        li { list-style:none; }
        .box{ width: 350px;border: 1px solid #dfdfde;margin: 30px auto; padding: 0px 2px;}
        .clear { zoom:1; }
        .clear:after { content:''; display:block; clear:both; }
        #btn{ position: absolute; top: 2px; left: 1px}
        #btn li{ float: left; width: 50px; height: 30px; border: 1px solid #dfdfde; line-height: 30px; text-align: center; color: #96aeb6; margin-left: -1px; cursor: pointer}
        .nav{ width: 350px; height: 33px;position: relative}
        #btn .active{background-color: #fff; border-bottom:none;height: 31px;  }
        .warp{ width: 348px; height: 185px; border: 1px solid #dfdfde; margin-bottom: 20px; padding-top: 15px; }
        .warp img{ float: left; border: 1px solid #a1aeb0}
        .warp ul{ float: left}
        #list li{ width: 197px; height: 40px;line-height: 40px; text-align: left; font-size: 14px;  border: 1px solid #ebefed; margin-bottom: 3px; background-color: #dae3e2; }

    </style>
    <script>
        window.onload=function(){
                var oUl=document.getElementById("btn");
                var oLi=oUl.getElementsByTagName("li");
                var oUl_1=document.getElementById("list");
                var oLi_1=oUl_1.getElementsByTagName("li");
                var oDiv=document.getElementById("warp");
                var oImg=oDiv.getElementsByTagName("img")[0];
                var arr=["实现网络强国","突破核心技术","中方回应","美日韩回应"];
                var arr1=["实现网络强国_1","突破核心技术_1","中方回应_1","美日韩回应_1"];
                var srcArr=["img/dsq/1.png","img/dsq/2.png"]
                var num=0;
                oLi[num].className="active";
                oImg.src=srcArr[num];
                var than=oLi[num];
                var than_1=oLi_1[num];
                oLi_1[num].style.backgroundColor="#5f5f5e";
                var timer=null;
                outoPlay();
                function outoPlay(){
                    clearInterval(timer);
                    timer=setInterval(function(){
                        than_1.style.backgroundColor="#dae3e2";
                        num++;
                        if(num==oLi_1.length){
                            num=0;
                        }
                        oLi_1[num].style.backgroundColor="#5f5f5e";
                        than_1=oLi_1[num];
                    },1000);
                }
                for(var i=0;i<oLi_1.length;i++) {
                    oLi_1[i].index=i;
                    oLi_1[i].innerHTML=arr[i];
                    oLi_1[i].onmouseover=function(){
                        clearInterval(timer);
                        than_1.style.backgroundColor="#dae3e2";
                        this.style.backgroundColor="#5f5f5e";
                        than_1=this;
                        num=this.index;
                    }
                    oLi_1[i].onmouseout=function(){
                        outoPlay();
                    }
                }
                for(var i=0;i<oLi.length;i++) {
                    oLi[i].index = i;
                    oLi[i].onclick = function () {
                        than.className = "";
                        this.className = "active";
                        oImg.src=srcArr[this.index];
                        than = this;
                        if(this.index==0){
                            for(var i=0;i<oLi_1.length;i++) {
                                oLi_1[i].innerHTML = arr[i];
                            }
                        }else{
                            for(var i=0;i<oLi_1.length;i++) {
                                oLi_1[i].innerHTML = arr1[i];
                            }
                        }
                        num=0;
                        than_1.style.backgroundColor="#dae3e2";
                        oLi_1[num].style.backgroundColor="#5f5f5e";
                        than_1=oLi_1[num];
                        outoPlay();
                    }
                }
        }
    </script>

</head>
<body>
<div class="box">
    <div class="nav">
        <ul id="btn">
            <li >专题</li>
            <li>视频</li>
        </ul>
    </div>
    <div class="warp clear" id="warp">
        <img src="img/dsq/1.png"/>
        <ul id="list">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
</body>
</html>